<!-- flv格式 -->
<template>
  <div>
    <video
        v-if="videoUrl"
        :id="videoUrl"
        ref="myPlayerRef"
        class="video-js vjs-default-skin myPlayer"
        :controls="true"
        muted
        autoplay="autoplay"
        preload="auto"
    ></video>
  </div>
</template>

<script>
import flvjs from "flv.js";
export default {
  name: "videoFlv",
  props: {
    videoUrl:{
      type: String,
      default: function(){
        return ""
      }
    },
    showOperateBtns:{
      type: Boolean,
      default: function(){
        return false
      }
    }
  },
  data() {
    return {
      url: "/flv/source.flv",
      videoExample: null,
    };
  },
  watch:{

    videoUrl: {
      immediate: true,
      handler() {
        console.log(this.videoUrl)
        this.videoDestroy()
        if (this.videoUrl) {
          console.log('--->',this.videoUrl)
          this.getVideo();
        }
      }
    }
  },
  created() {},
  mounted() {

  },
  beforeDestroy() {
    this.videoDestroy();
  },
  videoUrl:{
    type: String,
    default: function(){
      return ""
    }
  },
  methods: {
    getVideo() {
      console.log('---.')
      if (flvjs.isSupported()) {
        // const videoElement = document.getElementById("myPlayer");

        this.$nextTick(()=> {
           try{
             const videoElement = this.$refs.myPlayerRef;
             this.videoExample = flvjs.createPlayer({
               type: "flv", //类型
               isLive: true, //是否实时流
               // url: '/flv/source.flv', //路径
               url: this.videoUrl, //路径
               hasAudio: false,
               enableStashConsole: false,
               autoReloadOnError: true,
               enablePerformanceMonitor: false,
               enableVerbose: false
               // segments: [], //多段播放
             });
             this.videoExample.attachMediaElement(videoElement);
             this.videoExample.load();
             this.videoExample.play();
           }catch (e) {
             // console.log('--->',e)
           }
        })
      }
    },
    // 销毁实例
    videoDestroy() {
      if (this.videoExample) {
        this.videoExample.pause();
        this.videoExample.unload();
        this.videoExample.detachMediaElement();
        this.videoExample.destroy();
        this.videoExample = null;
      }
    },
  },
};
</script>

<style scoped>
.myPlayer{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: fill;

}

</style>
